<!-- 联系信息 -->
<template>
  <div class="contact-info-box">
    <van-form ref="formRef" @submit="onSubmit">
      <h2 style="margin-left: 20px;">填写联系信息</h2>
      <h4 style="margin-left: 20px;">请先填写完整联系信息，以便为您发送奖品</h4>
      <van-cell-group inset>
        
        <van-field
          v-model="form.memberName"
          name="姓名"
          label="姓名"
          placeholder="请输入姓名"
          :readonly="noModify"
          :rules="[{ required: true, message: '请输入姓名' }]"
        />
        <van-field
          name="phone"
          v-model="form.phone"
          center
          clearable
          :required="true"
          label="联系电话"
          placeholder="请输入联系电话"
          :readonly="noModify"
          type="tel"
          :maxlength="11"
          :rules="[{ required: true, message: '请输入联系电话' }]"
        />
        <van-field
          v-model="form.code"
          name="验证码"
          label="验证码"
          placeholder="验证码"
          :readonly="noModify"
          :rules="[{ required: true, message: '请填写验证码' }]"
          v-if="buzTask.contactInfoSms && buzTask.contactInfoSms === 0"
        >
        <template #button>
            <van-button size="small" type="primary" :disabled="!sendCodeAble" @click="getSmsCode">
              <van-count-down ref="countDownRef" :time="time" @finish="sendCodeAble = true">
                <template #default="timeData">
                  <span style="color: #fff;" v-if="sendCodeAble">获取验证码</span>
                  <span style="color: red;" v-if="!sendCodeAble">{{ timeData.seconds }}s</span>
                </template>
              </van-count-down>
              <span></span>
            </van-button>
          </template>
        </van-field>
      </van-cell-group>

      <div style="margin: 20px 20px 5px;">联系地址</div>

      <van-cell-group inset>
        
        <van-field
          v-model="form.area"
          is-link
          readonly
          label="地区"
          placeholder="请选择所在地区"
          @click="show = (noModify === true ? false : true)"
        />
        <!--<van-field
          v-model="form.phone"
          center
          clearable
          label="联系电话"
          placeholder="请输入联系电话"
          :rules="[{ required: true, message: '请输入联系电话' }]"
        >
          <template #button>
            <van-button size="small" type="primary">获取验证码</van-button>
          </template>
        </van-field>-->
        <van-field
          v-model="form.address"
          rows="2"
          autosize
          type="textarea"
          :readonly="noModify"
          maxlength="200"
          placeholder="请输入详细地址"
          show-word-limit
        />
      </van-cell-group>

      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>

    <van-popup v-model:show="show" round position="bottom">
      <van-cascader
        v-model="cascaderValue"
        title="请选择所在地区"
        :options="options"
        @close="show = false"
        @finish="onFinish"
      />
    </van-popup>
  </div>
</template>

<script setup lang="ts">
import { ref, defineEmits } from 'vue';
import { useCascaderAreaData } from '@/assets/js/areaList';
import { sendSms,saveMember, queryMemberInfo, getTask } from '@/api/task.js';
import { onMounted } from 'vue';
const props = defineProps(['noModify'])

const buzTask: any = ref({});
const detail = ref({});
const show = ref(false)
const cascaderValue = ref('');
const options = useCascaderAreaData();
const time = ref(60 * 1000)
const countDownRef = ref();
const sendCodeAble = ref(true);
const formRef = ref();
const form = ref({
  memberName:'',
  phone: '',
  code: '',
  area:'',
  address:'',
  openId: localStorage.getItem('token')
})

const emit = defineEmits(['submit'])

onMounted(() => {
  queryMemberInfo({openId: localStorage.getItem('token')}).then((res: any) => {
    if (res.code == 200) {
      detail.value = res.data;
      form.value.memberName = res.data.memberName;
      form.value.phone = res.data.phone;
      form.value.area = res.data.area;
      form.value.address = res.data.address;
    }
  })
  getTaskInfo()
})

// 获取任务信息
function getTaskInfo(){
  getTask(localStorage.getItem('taskId')).then((res: any)=>{
    console.log(res)
    buzTask.value = res.data;
  })
}

const onSubmit = () => {
  console.log(form.value);
  saveMember(form.value).then( (res: any)  => {
    console.log(res);
    if (res.code == 200) {
      emit('submit', true)
    }
  })

}
const getSmsCode = () => {  
  formRef.value.validate(['phone']).then(() => {    
    sendSms(form.value.phone, 8888).then((res: any) => {
      if (res.code == 200) {        
        countDownRef.value.reset();
        sendCodeAble.value = false;
      }
    })
  })
}

const onFinish = ({ selectedOptions }:any) => {
  show.value = false;
  form.value.area = selectedOptions.map((option:any) => option.text).join('/');
};

function onFinishCountDown() {
  sendCodeAble.value = true;
}
</script>

<style scoped lang="less">
.contact-info-box{
  width: 100%;
  height: 100vh;
  background-color: #97a8be;
  padding-top: 20px;
  box-sizing: border-box;

  .title{
    // margin-left: 20px;
  }
}
</style>